<template>
  <div class="home_child_container">
    <div class="domain_container_left">
      <!-- 用户信息卡片 -->
      <a-card class="user_info_card" :loading="loading">
        <template #title>
          <b>关于作者</b>
        </template>
        <div class="user_info">
          <a-avatar class="user_avatar" :size="100" :src="user.avatar">{{ user.name }}</a-avatar>
          <a-space class="user_name">
            <div class="user_name_text">
              <span>{{ user.name }}</span>
            </div>
            <div class="user_sex">
              <ManOutlined v-show="user.sex===1" style="color: deepskyblue"/>
              <WomanOutlined v-show="user.sex===2" style="color: pink"/>
              <BugOutlined v-show="user.sex!==1&&user.sex!==2" style="color: blueviolet"/>
            </div>
          </a-space>
          <span class="user_domain">@{{ domain }}</span>
          <div class="user_introduction">
            <span>{{ user.introduction }}</span>
            <span v-show="user.introduction.trim().length===0">暂无简介</span>
          </div>
          <div class="user_statistics">
            <div class="user_statistics_item" @click="routerToBlog">
              <span class="item_value">{{ user.blogTotal }}</span>
              <span class="item_name">博客</span>
            </div>
            <router-link :to="`/u/${domain}/followers`">
              <div class="user_statistics_item">
                <span class="item_value">{{ user.followers }}</span>
                <span class="item_name">粉丝</span>
              </div>
            </router-link>
            <router-link :to="`/u/${domain}/following`">
              <div class="user_statistics_item">
                <span class="item_value">{{ user.following }}</span>
                <span class="item_name">关注</span>
              </div>
            </router-link>
          </div>
          <user-operation class="user_operation" size="default" :key="user.id" :user-id="user.id"
                          :is-owner="user.isOwner" :is-follow="user.isFollow" @change="follow"/>
        </div>
      </a-card>
      <!-- 用户博客分类 -->
      <a-card class="user_classification_card" :loading="loading">
        <template #title>
          <b>分类专栏</b>
        </template>
        <template #extra>
          <a @click="routerToBlog">全部</a>
        </template>
        <a-empty v-if="classificationList.length===0" description="暂无分类"></a-empty>
        <router-link class="classification_item" v-for="classification in classificationList" :key="classification.id"
                     :style="{backgroundColor:classification.id===activeClassification.id?'#00000010':''}"
                     :to="`/u/${domain}?tab=blog&classification=${classification.id}`">
          <BookOutlined/>
          <div class="classification_name">{{ classification.name }}</div>
          <div class="classification_count">{{ `(${classification.count})` }}</div>
        </router-link>
      </a-card>
    </div>
    <div class="domain_container_right">
      <!-- 展示区域 -->
      <router-view :domain="domain" @changeClassification="changeClassification"/>
    </div>
  </div>
</template>

<script>
import { computed, defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { BookOutlined, BugOutlined, ManOutlined, WomanOutlined } from '@ant-design/icons-vue'
import UserOperation from '@/components/operation/UserOperation'
import { GetBriefUserByDomain } from '@/service/user'
import { GetClassificationListByDomain } from '@/service/blog'

export default defineComponent({
  setup () {
    const route = useRoute()
    const router = useRouter()
    const state = reactive({
      domain: computed(() => route.params.domain),
      loading: true,
      user: {
        id: '',
        name: '',
        introduction: '',
        sex: 3,
        avatar: '',
        blogTotal: 0,
        followers: 0,
        following: 0,
        isOwner: false,
        isFollow: false
      },
      classificationList: [{
        id: '',
        name: ''
      }],
      activeClassification: {
        id: ''
      }
    })

    const methods = reactive({
      follow: (isFollow) => {
        isFollow ? state.user.followers += 1 : state.user.followers -= 1
      },
      routerToBlog: () => {
        router.push(`/u/${state.domain}?tab=blog`)
        state.activeClassification = {
          id: '',
          name: ''
        }
      },
      changeClassification: (id, callback) => {
        if (id === undefined) {
          state.activeClassification = {
            id: '',
            name: ''
          }
          callback(state.activeClassification.name)
          return
        }
        state.classificationList.forEach(item => {
          if (item.id === id) {
            state.activeClassification = item
            callback(item.name)
          }
        })
      }
    })

    watch(() => state.domain, async (newValue) => {
      if (newValue) {
        // 开始加载
        state.loading = true
        // 根据域名查询用户信息
        state.user = await GetBriefUserByDomain(state.domain)
        // 根据域名获取用户的分类列表
        state.classificationList = await GetClassificationListByDomain(state.domain)
        // 加载完成
        state.loading = false
      }
    })

    onMounted(async () => {
      // 根据域名查询用户信息
      state.user = await GetBriefUserByDomain(state.domain)
      // 根据域名获取用户的分类列表
      state.classificationList = await GetClassificationListByDomain(state.domain)
      // 加载完成
      state.loading = false
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  },
  components: {
    UserOperation,
    BugOutlined,
    ManOutlined,
    WomanOutlined,
    BookOutlined
  }
})
</script>

<style lang="less">
.home_child_container {

  & .domain_container_left {
    width: 24%;
    height: 100%;
    display: flex;
    flex-direction: column;

    & .user_info {
      padding: 0 20px;
      display: flex;
      align-items: center;
      flex-direction: column;

      & .user_avatar {
        margin: 5px 0;
        height: 120px;
      }

      & .user_name {
        margin-top: 20px;
        font-size: 22px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;

        & .user_sex {
          font-size: 16px;
        }
      }

      & .user_domain {
        margin-top: 5px;
        font-size: 13px;
      }

      & .user_introduction {
        margin-top: 10px;
        width: 90%;
        display: flex;
        justify-content: center;
      }

      & .user_statistics {
        margin-top: 10px;
        width: 100%;
        display: flex;
        justify-content: space-between;

        & a {
          color: #000000;
        }

        & .user_statistics_item {
          padding: 5px 20px;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;

          &:hover {
            border-radius: 5px;
            background-color: #00000010;
          }

          & .item_name {
            font-weight: 700;
            font-size: 14px;
          }

          & .item_value {
            font-size: 24px;
          }
        }
      }

      & .user_operation {
        margin-top: 10px;
        width: 90%;
      }
    }

    & .user_classification_card {
      margin-top: 10px;

      & .classification_item {
        height: 30px;
        margin: 5px 0;
        padding: 0 10px;
        color: #000000;
        cursor: pointer;
        display: flex;
        align-items: center;

        &:hover {
          background-color: #00000005;
        }

        & .classification_name {
          margin: 0 10px;
          width: 85%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }

  & .domain_container_right {
    width: 75%;
    padding: 10px 20px;
    background-color: #fff;

    & .ant-card-body {
      padding: 0;
    }
  }
}

@media screen and (max-width: 1400px) {
  .home_child_container {
    flex-direction: column;

    & .domain_container_left {
      margin: 5px 0;
      width: 100%;

      & .user_info_card {
        width: 100%;
      }

      & .user_classification_card {
        display: none;
      }
    }

    & .domain_container_right {
      width: 100%;
    }
  }
}
</style>
